<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>首页 - 驴妈妈流立方</title>
		<meta name="description" content="overview &amp; stats" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
		<script src="${rc.contextPath}/assets/js/jquery.2.1.1.min.js"></script>
		<script src="${rc.contextPath}/assets/js/bootstrap.min.js"></script>
		<script src="${rc.contextPath}/assets/js/jquery-ui.custom.min.js"></script>
		<script src="${rc.contextPath}/assets/js/jquery.ui.touch-punch.min.js"></script>
		<script src="${rc.contextPath}/assets/js/bootbox.min.js"></script>
		<script src="${rc.contextPath}/assets/js/jquery.gritter.min.js"></script>
		<script src="${rc.contextPath}/assets/js/spin.min.js"></script>
		<!-- ace scripts -->
		<script src="${rc.contextPath}/assets/js/ace-elements.min.js"></script>
		<script src="${rc.contextPath}/assets/js/ace.min.js"></script>
		<!-- validator scripts -->
		<script src="${rc.contextPath}/assets/js/bootstrapValidator.min.js"></script>
		<!-- user scripts -->
		<script src="${rc.contextPath}/assets/js/user/base.js"></script>
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="${rc.contextPath}/assets/font-awesome/4.2.0/css/font-awesome.min.css" />
		<!-- page specific plugin styles -->
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/jquery-ui.custom.min.css" />
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/jquery.gritter.min.css" />
		<!-- text fonts -->
		<link rel="stylesheet" href="${rc.contextPath}/assets/fonts/fonts.googleapis.com.css" />
		<!-- BootstrapValidator -->
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrapValidator.min.css" />
		<!-- ace styles -->
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
		<!-- ace settings handler -->
		<script src="${rc.contextPath}/assets/js/ace-extra.min.js"></script>
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/bsie-paginator.css" />

	</head>

	<body class="no-skin" style="background-color: #FFF;">
		<div class="page-content">
			<div class="row">
				<div class="col-xs-12">
					<div class="widget-box">
						<div class="widget-body" style="background-color: #EFF3F8;">
							<div class="widget-main">
								<form class="form-inline" id="searchForm" method="post" action="${rc.contextPath}/performanceStatistics/allInterfaceErrorRates">
									<input id="chooseTimeVO" type="hidden" name="chooseTimeVO" value="${monitorVO.chooseTimeVO}">
									<input id="chooseTimeTableVO" type="hidden" name="chooseTimeTableVO" value="${monitorVO.chooseTimeTableVO}">
									<input id="failuerType" type="hidden" name="failuerType" value="${monitorVO.failuerType}">
									<input id="pageSizeForm" type="hidden" name="pageSize" value="${monitorVO.pageSize}">
									<div class="form-group">
										<label for="exampleInputName2">选择时段</label> 
										<input type="text" id="config-demo" name="config-demo" class="form-control time" value="${monitorVO.chooseTimeVO}">
											<button id="app_search" type="button"  onclick="replaceDate('1');" class="btn btn-white btn-sm">
												<span class="ace-icon icon-on-right bigger-110"></span>
												过去一周
											</button>
											<button id="app_search" type="button"  onclick="replaceDate('2');" class="btn btn-white btn-sm">
												<span class="ace-icon icon-on-right bigger-110"></span>
												过去两周
											</button>
									</div>
									<div class="form-group">
									  	<button id="search" type="button" onclick="searchClick();" class="btn btn-pink btn-sm">
											<span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
											Search
										</button>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<div class="row">
				<div class="col-xs-12">
					<div class="widget-box">
						<div class="widget-header widget-header-small">
							<div class="row">
								<div class="col-xs-12">
									<div id="allInterfaceFailureRate" style="width: 100%; height: 350px;"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<div class="row" id="failuerTable">
				<div class="col-xs-12">
					<div class="widget-box">
						<div class="widget-header widget-header-small">
						</div>
						<div class="row">
							<div class="col-xs-12">
								<div style="width: 100%; margin: 0 auto;">
									<table id="simple-table" class="table table-striped table-bordered table-hover" style="margin-bottom: 0px;border-bottom: 0px;">
										<thead>
											<tr>
												<th>序号</th>
												<th>接口名</th>
												<th>请求方式</th>
												<th>错误码</th>
												<th>异常类型</th>
												<th>客户端</th>
												<th>失败次数</th>
												<th>操作</th>
											</tr>
										</thead>
										<tbody id="tableData">
											<#if monitorFailureApiList?? && monitorFailureApiList?size&gt;0>
												<#list monitorFailureApiList as monitorFailureApi>
													<tr class="">
														<td>${monitorFailureApi_index + 1}</td>
														<td>${monitorFailureApi.apiName}</td>
														<td>${monitorFailureApi.method!}</td>
														<td>${monitorFailureApi.failureCode}</td>
														<td>${monitorFailureApi.failuerType}</td>
														<td>${monitorFailureApi.appType}</td>
														<td>${monitorFailureApi.amount}</td>
														<td><a class = "blue" href = "javascript:void(0);" onclick="actionPie('${monitorFailureApi.apiName}','${monitorFailureApi.method}','${monitorFailureApi.failureCode}','${monitorFailureApi.failuerType}','${monitorFailureApi.appType}');"><i class = "ace-icon fa fa-search-plus bigger-130"></i></a></td>
													</tr>
												</#list>
											<#else>
												<tr>
													<td colspan="12">
														<div class="alert alert-danger" style="margin-bottom: 0px;" role="alert">没有记录!</div>
													</td>
												</tr>
											</#if>
										</tbody>
									</table>
									<#include "paginatorUpgrade.html">
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<div class="row failuerInterface">
				<div class="col-xs-12">
					<div class="widget-box">
						<div class="widget-header widget-header-small">
							<div class="row">
								<div class="col-xs-12">
									<div id="singleInterfaceFailureRate" style="width: 100%; height: 350px;"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			       <div class="row failuerInterface">
						<div class="col-xs-12">
							<div class="col-xs-6" style="padding-left: 2px; padding-right: 2px;">
								<div class="widget-box">
									<div class="widget-body">
										<div class="widget-main">
											<div id="versionMap" style="width:100%;height:320px;"></div>
										</div>
									</div>
								</div>
							</div>
							
							<div class="col-xs-6" style="padding-left: 2px; padding-right: 2px;">
								<div class="widget-box">
									<div class="widget-body">
										<div class="widget-main">
											<div id="operatorDiagram" style="width:100%;height:320px;"></div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					
					
				 <div class="row failuerInterface">
						<div class="col-xs-12">
							<div class="col-xs-6" style="padding-left: 2px; padding-right: 2px;">
								<div class="widget-box">
									<div class="widget-body">
										<div class="widget-main">
											<div id="networkDiagram" style="width:100%;height:320px;"></div>
										</div>
									</div>
								</div>
							</div>
							
							<div class="col-xs-6" style="padding-left: 2px; padding-right: 2px;">
								<div class="widget-box">
									<div class="widget-body">
										<div class="widget-main">
											<div id="provincialMap" style="width:100%;height:320px;"></div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
			
		</div>

		<script src="${rc.contextPath}/assets/js/moment.min.js"></script>
		<script src="${rc.contextPath}/assets/js/bootstrap-datetimepicker.min.js"></script>
		
		<!-- <link rel="stylesheet" href="${rc.contextPath}/stylesheets/bootstrap.min.css"> -->
		<!-- <link rel="stylesheet" href="${rc.contextPath}/stylesheets/bootstrap-theme.min.css"> -->
		<link rel="stylesheet" href="${rc.contextPath}/stylesheets/daterangepicker.css">
		<script type="text/javascript" src="${rc.contextPath}/javascripts/jquery.2.1.1.min.js"></script>
	   	<script type="text/javascript" src="${rc.contextPath}/javascripts/bootstrap.min.js"></script>
	   	<script type="text/javascript" src="${rc.contextPath}/javascripts/moment.js"></script>
	   	<script type="text/javascript" src="${rc.contextPath}/javascripts/daterangepicker.js"></script>
	   	
	   	<script type="text/javascript" src="${rc.contextPath}/javascripts/echarts.js"></script>
	   	<script type="text/javascript" src="${rc.contextPath}/javascripts/china.js"></script>
	   	<script src="${rc.contextPath}/assets/js/jquery.gritter.min.js"></script>
		<script type="text/javascript">
		
			var option1, option2, option3, option4, option5;
			var myChart1, myChart2, myCharts3, myCharts4, myCharts5, myCharts6;
			
			function replaceDate(obj){
	    		if(obj == '1'){
	    			startDate = new Date(new Date().getTime()-7*1000*60*60*24);
		    		endDate = new Date(new Date().getTime()-1*1000*60*60*24);
	    		}else if(obj == '2'){
	    			startDate = new Date(new Date().getTime()-14*1000*60*60*24);
		    		endDate = new Date(new Date().getTime()-1*1000*60*60*24);
	    		}
			 	var dateStr = dateFormat(startDate) + " - " + dateFormat(endDate);
			    $("#chooseTimeVO").val(dateStr);
			    $(".time").val(dateStr);
	    	}
		
			function dateFormat(date){
	    		var month = date.getMonth() + 1;
    		    var strDate = date.getDate();
    		    if (month >= 1 && month <= 9) {
    		        month = "0" + month;
    		    }
    		    if (strDate >= 0 && strDate <= 9) {
    		        strDate = "0" + strDate;
    		    }
    		    var currentdate = month + "/" + strDate + "/" + date.getFullYear();
    		    return currentdate;
	    	}

			function searchClick() {
				var chooseTime = $("#config-demo").val();
				var pageSize = $("#pageSize").val();
				$('#pageSizeForm').val(pageSize);
				$('#chooseTimeVO').val(chooseTime);
				$('#chooseTimeTableVO').val(null);
				$("#failuerType").val(null);
				$("#searchForm").submit();
			}
			
			function actionPie(apiName,method,failureCode,failuerType,appType){
				$(".failuerInterface").css("visibility","visible");
				var chooseTimeTableVO = $("#chooseTimeTableVO").val();
				var chooseTimeVO = $("#chooseTimeVO").val();
				$.ajax({
					url : "${rc.contextPath}/performanceStatistics/actionPie",
					type:'post',
					data : {
						"apiName" : apiName,
						"method" : method,
						"failureCode" : failureCode,
						"failuerType" : failuerType,
						"appType" : appType,
						"chooseTimeTableVO" : chooseTimeTableVO,
						"chooseTimeVO" : chooseTimeVO
					},
					dataType : "json",
					success : function(data) {
						if(data!=null){
							var versionsSeries = data.versionsSeries;
							var versionsLegend = data.versionsLegend;
							var operatorsSeries = data.operatorsSeries;
							var operatorsLegend = data.operatorsLegend;
							var networkTypeSeries = data.networkTypeSeries;
							var networkTypeLegend = data.networkTypeLegend;
							var provinceSeries = data.provinceSeries;
							var provinceLegend = data.provinceLegend;
							var dateInterval = data.dateInterval;
							var proportion = data.proportion;
							option1.series[0].data=versionsSeries;
							option1.legend.data=versionsLegend;
						 	myChart2.setOption(option1,true);
						 	option2.series[0].data=operatorsSeries;
							option2.legend.data=operatorsLegend;
						 	myChart3.setOption(option2,true);
						 	option3.series[0].data=networkTypeSeries;
							option3.legend.data=networkTypeLegend;
						 	myChart4.setOption(option3,true);
						 	option4.series[0].data=provinceSeries;
							option4.legend.data=provinceLegend;
						 	myChart5.setOption(option4,true);
						 	option5.xAxis.data = dateInterval;
						 	option5.series[0].data= proportion;
						 	myChart6.setOption(option5,true);
						}
					}
				});
			}
			
		
			jQuery(function($) {
				var chooseTimeTableVO = "${monitorVO.chooseTimeTableVO}";
				if(chooseTimeTableVO == null || chooseTimeTableVO == ""){
					$("#failuerTable").css("visibility","hidden");
				} 
				$(".failuerInterface").css("visibility","hidden");
				$('.time').daterangepicker(
						{
							startDate: new Date(new Date().getTime()-1*1000*60*60*24),
						    endDate: new Date(new Date().getTime()-1*1000*60*60*24),
							showDropdowns : true,
							showWeekNumbers : false,
							timePicker : false,
							timePicker12Hour : false,
							ranges : {
								'昨日': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
				            	'过去7天': [moment().subtract(7, 'days'), moment().subtract(1, 'days')],  
				                '过去31天': [moment().subtract(31, 'days'), moment().subtract(1, 'days')]
							},
							opens : 'right',
							buttonClasses : [ 'btn btn-default' ],
							applyClass : 'btn-small btn-pink blue',
							cancelClass : 'btn-small',
							format : 'yyyy-MM-dd',
							separator : ' to ',
							locale : {
								applyLabel : '确定',
								cancelLabel : '取消',
								fromLabel : '起始时间',
								toLabel : '结束时间',
								customRangeLabel : '自定义',
								daysOfWeek : [ '日', '一', '二', '三', '四', '五',
										'六' ],
								monthNames : [ '一月', '二月', '三月', '四月', '五月',
										'六月', '七月', '八月', '九月', '十月', '十一月',
										'十二月' ],
								firstDay : 1
							}
						},
						function(start, end, label) {//格式化日期显示框  

							$('.time').html(
									start.format('yyyy-MM-dd') + ' - '
											+ end.format('yyyy-MM-dd'));
						});
				var chooseTimeVO = "${monitorVO.chooseTimeVO}";
				if(chooseTimeVO != ""){
					$('#config-demo').val(chooseTimeVO);
				}

				
				/* 数值每3位，逗号隔开 */
				function formatNum(strNum) {
					if (strNum.length <= 3) {
						return strNum;
					}
					if (!/^(\+|-)?(\d+)(\.\d+)?$/.test(strNum)) {
						return strNum;
					}
					var a = RegExp.$1, b = RegExp.$2, c = RegExp.$3;
					var re = new RegExp();
					re.compile("(\\d)(\\d{3})(,|$)");
					while (re.test(b)) {
						b = b.replace(re, "$1,$2$3");
					}
					return a + "" + b + "" + c;
				}
				
				option = {
		   			    title: {
		   			        text: '所有接口失败率'
		   			    },
		   			    tooltip: {
		   			        trigger: 'axis'
		   			    },
		   			    legend: {
		   			        data:['接口异常','网络异常']
		   			    },
		   			    toolbox: {
		   			        show: true,
		   			        feature: {
		   			           /* 
		   			                //区域放大，缩小
		   			                dataZoom: {
		   			                yAxisIndex: 'none'
		   			            }, */  
		   			            dataView: {readOnly: true},
		   			            magicType: {type: ['line', 'bar']},
		   			            restore: {},
		   			            saveAsImage: {}
		   			        }
		   			    },
		   			 	dataZoom: [
		   			         {
		   			             show: true,
		   			             start: 0,
		   			             end: 100,
		   			         },
		   			     ],
		   			    xAxis:  {
		   			        type: 'category',
		   			        boundaryGap: false,
		   			        data: ['周一','周二','周三','周四','周五','周六','周日']
		   			    },
		   			    yAxis: {
		   			        type: 'value',
		   			        axisLabel: {
		   			            formatter: '{value} %'
		   			        }
		   			    },
		   			    series: [
		   			        {
		   			            name:'接口异常',
		   			            type:'line',
		   			            data:[23,5 , 73, 8, 35, 19, 9],
		   			        },
		   			     {
		   			            name:'网络异常',
		   			            type:'line',
		   			            data:[13,2 , 5, 4, 10, 8, 34],
		   			        }
		   			    ]
		   			};
				
				
				option5 = {
		   			    title: {
		   			        text: '单个接口失败率'
		   			    },
		   			    tooltip: {
		   			        trigger: 'axis'
		   			    },
		   			    /* legend: {
		   			        data:['接口异常','网络异常']
		   			    }, */
		   			    toolbox: {
		   			        show: true,
		   			        feature: {
		   			           /* 
		   			                //区域放大，缩小
		   			                dataZoom: {
		   			                yAxisIndex: 'none'
		   			            }, */  
		   			            dataView: {readOnly: true},
		   			            magicType: {type: ['line', 'bar']},
		   			            restore: {},
		   			            saveAsImage: {}
		   			        }
		   			    },
		   			 	dataZoom: [
		   			         {
		   			             show: true,
		   			             start: 0,
		   			             end: 100,
		   			         },
		   			     ],
		   			    xAxis:  {
		   			        type: 'category',
		   			        boundaryGap: false,
		   			        data: []
		   			    },
		   			    yAxis: {
		   			        type: 'value',
		   			        axisLabel: {
		   			            formatter: '{value} %'
		   			        }
		   			    },
		   			    series: [
		   			        {
		   			            name:'异常',
		   			            type:'line',
		   			            data:[]
		   			        }
						]
		   			};
				
				
				
				option1 = {
					    title : {
					        text: '接口失败率版本分布',
					        x:'left'
					    },
					    tooltip : {
					        trigger: 'item',
					        formatter: "{a} <br/>{b} : {c} ({d}%)"
					    },
					    toolbox: {
					    	show: true,
					        feature: {
					        	dataView: {readOnly: true},
					            saveAsImage: {}
					        }
					    },
					    legend: {
					        orient: 'vertical',
					        right:'10%',
					        data: []
					    },
					   // color:['#100f78', '#67fe16','#e2214f','#FF33FF','#66FFFF','#FF6633'] ,
					    series : [
					        {
					            name: '版本',
					            type: 'pie',
					            radius : '55%',
					            center: ['50%', '60%'],
					            label:{
					            	normal : {
						            	 formatter: '{d}%'
						            	}
					            	},
					            data:[],
					            itemStyle: {
					                emphasis: {
					                    shadowBlur: 10,
					                    shadowOffsetX: 0,
					                    shadowColor: 'rgba(0, 0, 0, 0.5)'
					                }
					            }
					        }
					    ]
					};
				
				
				
				option2 = {
					    title : {
					        text: '接口失败率运营商分布',
					        x:'left'
					    },
					    tooltip : {
					        trigger: 'item',
					        formatter: "{a} <br/>{b} : {c} ({d}%)"
					    },
					    toolbox: {
					    	show: true,
					        feature: {
					        	dataView: {readOnly: true},
					            saveAsImage: {}
					        }
					    },
					    legend: {
					        orient: 'vertical',
					        right:'10%',
					        data: []
					    },
					   // color:['#100f78', '#67fe16','#e2214f','#FF33FF','#66FFFF','#FF6633'] ,
					    series : [
					        {
					            name: '运营商',
					            type: 'pie',
					            radius : '55%',
					            center: ['50%', '60%'],
					            label:{
					            	normal : {
						            	 formatter: '{d}%'
						            	}
					            	},
					            data:[],
					            itemStyle: {
					                emphasis: {
					                    shadowBlur: 10,
					                    shadowOffsetX: 0,
					                    shadowColor: 'rgba(0, 0, 0, 0.5)'
					                }
					            }
					        }
					    ]
					};
				
				
				
				option3 = {
					    title : {
					        text: '接口失败率网络分布',
					        x:'left'
					    },
					    tooltip : {
					        trigger: 'item',
					        formatter: "{a} <br/>{b} : {c} ({d}%)"
					    },
					    toolbox: {
					    	show: true,
					        feature: {
					        	dataView: {readOnly: true},
					            saveAsImage: {}
					        }
					    },
					    legend: {
					        orient: 'vertical',
					        right:'10%',
					        data: []
					    },
					   // color:['#100f78', '#67fe16','#e2214f','#FF33FF','#66FFFF','#FF6633'] ,
					    series : [
					        {
					            name: '网络制式',
					            type: 'pie',
					            radius : '55%',
					            center: ['50%', '60%'],
					            label:{
					            	normal : {
						            	 formatter: '{d}%'
						            	}
					            	},
					            data:[],
					            itemStyle: {
					                emphasis: {
					                    shadowBlur: 10,
					                    shadowOffsetX: 0,
					                    shadowColor: 'rgba(0, 0, 0, 0.5)'
					                }
					            }
					        }
					    ]
					};
				
				
				
				option4 = {
					    title : {
					        text: '接口失败率省份分布',
					        x:'left'
					    },
					    tooltip : {
					        trigger: 'item',
					        formatter: "{a} <br/>{b} : {c} ({d}%)"
					    },
					    toolbox: {
					    	show: true,
					        feature: {
					        	dataView: {readOnly: true},
					            saveAsImage: {}
					        }
					    },
					    legend: {
					        orient: 'vertical',
					        right:'10%',
					        data: []
					    },
					   // color:['#100f78', '#67fe16','#e2214f','#FF33FF','#66FFFF','#FF6633'] ,
					    series : [
					        {
					            name: '省份',
					            type: 'pie',
					            radius : '55%',
					            center: ['50%', '60%'],
					            label:{
					            	normal : {
						            	 formatter: '{d}%'
						            	}
					            	},
					            data:[],
					            itemStyle: {
					                emphasis: {
					                    shadowBlur: 10,
					                    shadowOffsetX: 0,
					                    shadowColor: 'rgba(0, 0, 0, 0.5)'
					                }
					            }
					        }
					    ]
					};


				var monitorFailuerAPIJsonXAxis = eval('${monitorFailuerAPIJsonXAxis!}');
		 		var monitorFailuerAPIJsonProportion1 = eval('${monitorFailuerAPIJsonProportion1!}');
		 		var monitorFailuerAPIJsonProportion2 = eval('${monitorFailuerAPIJsonProportion2!}');
				
				option.xAxis.data = monitorFailuerAPIJsonXAxis;
				option.series[0].data=monitorFailuerAPIJsonProportion1;
				option.series[1].data=monitorFailuerAPIJsonProportion2;
				
				myChart1 = echarts.init(document.getElementById('allInterfaceFailureRate'));
				myChart2 = echarts.init(document.getElementById('versionMap'));
				myChart3 = echarts.init(document.getElementById('operatorDiagram'));
				myChart4 = echarts.init(document.getElementById('networkDiagram'));
			    myChart5 = echarts.init(document.getElementById('provincialMap'));
			    myChart6 = echarts.init(document.getElementById('singleInterfaceFailureRate'));
			 	myChart1.setOption(option,true);
			 	myChart2.setOption(option1,true);
			 	myChart3.setOption(option2,true);
			 	myChart4.setOption(option3,true);
			 	myChart5.setOption(option4,true);
			 	myChart6.setOption(option5,true);
			 	
			 	myChart1.on('click', function (params) {
			 		$(".failuerInterface").css("visibility","hidden");
			 		var chooseTimeVO = $("#chooseTimeVO").val();
			 		var pageSize = $("#pageSizeForm").val();
			 		$.ajax({
						url : "${rc.contextPath}/performanceStatistics/ajaxFailureTable",
						type:'post',
						data : {
							"chooseTimeVO" : chooseTimeVO,
							"chooseTimeTableVO" : params.name,
							"seriesIndex" : params.seriesIndex,
							"page" : 1,
							"pageSize":pageSize 
						},
						dataType : "json",
						success : function(data) {
							if(data!=null){
								$("#failuerTable").css("visibility","visible");
								var page = data.page;
								var monitorFailureApiList = data.monitorFailureApiList;
								var monitorVO = data.monitorVO;
								var chooseTimeTableVO = data.monitorVO.chooseTimeTableVO;
								var failuerType = data.monitorVO.failuerType;
								$("#chooseTimeTableVO").val(chooseTimeTableVO);
								$("#failuerType").val(failuerType);
								$(".ui-pg-input").val(page.pageNum);
								$("#sp_1_grid-pager").html(page.pages);
								var val = 'Page Size:<input id="pageSize" class="ui-pg-input" type="text" size="2" maxlength="7" value="'+page.pageSize+'"  role="textbox">&nbsp;'
									+'View '+page.startRow+' - '+page.endRow+' of '+page.total;
								$(".ui-paging-info").html(val);
								$("#first_grid-pager").attr("onclick","showPage("+page.firstPage+",this)");
								$("#prev_grid-pager").attr("onclick","showPage("+page.prePage+",this)");
								$("#next_grid-pager").attr("onclick","showPage("+page.nextPage+",this)");
								$("#last_grid-pager").attr("onclick","showPage("+page.lastPage+",this)");
								if(monitorFailureApiList != null){
									var html = '';
									for(var i=0;i<monitorFailureApiList.length;i++){
										var index = i+1;
										var apiName = monitorFailureApiList[i].apiName;
										var method = monitorFailureApiList[i].method;
										var failureCode = monitorFailureApiList[i].failureCode;
										var failuerType = monitorFailureApiList[i].failuerType;
										var appType = monitorFailureApiList[i].appType;
										var amount = monitorFailureApiList[i].amount;
										html += '<tr class=""><td>'+index+'</td><td>'+apiName+'</td><td>'+method+
												'</td><td>'+failureCode+'</td><td>'+failuerType+'</td><td>'+appType+'</td><td>'+
												amount+'</td><td><a class = "blue" href = "javascript:void(0);" '+
												'onclick="actionPie(\''+apiName+'\',\''+method+'\',\''+failureCode+'\',\''+failuerType+'\',\''+appType+'\');"><i class = "ace-icon fa fa-search-plus bigger-130"></i></a></td></tr>';
									} 
									$("#tableData").html(html);
								}else{
									var html = '<tr><td colspan="12"><div class="alert alert-danger" style="margin-bottom: 0px;" role="alert">没有记录!</div></td></tr>';
									$("#tableData").html(html);
								}
								
							}
						}
					});
			 	});
			 	
		  	  	window.onresize = function(){
	  	  	  		myChart1.resize();
	  	  	  	    myChart2.resize();
	  	  	        myChart3.resize();
	  	  	        myChart4.resize();
	  	     	 	myChart5.resize(); 
	  	     	 	myChart6.resize(); 
		  	  	} 

			})
			
			
		</script>


		<link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrap.css" /> 
		<script src="${rc.contextPath}/assets/js/chosen.jquery.js"></script>
		
		<script>
			 $(function() {
		        $('.chosen-select').chosen();
		       	$('.chosen-select-deselect').chosen({ allow_single_deselect: true });
		     }); 
	      	
			 function statistics(){
				$('#statistics').show();
				$('.chosen-select').chosen("destroy").chosen();
		       	$('.chosen-select-deselect').chosen({ allow_single_deselect: true });
			 }
	    </script>
	    
	</body>
</html>